"use client";
import React, { useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { LiveProvider, LiveError, LivePreview } from 'react-live';
import Button from '../button/components/Button';
import FloatButton from '../floatbutton/components/FloatButton';
import ButtonGroup from '../button/components/ButtonGroup';

type CodeSandBoxProps = {
    height?: string,
    hasChangeButton?: boolean,
    block?: boolean,
    codeTitle?: string,
    previewTitle?: string,
    theme?: "light" | "dark",
    readOnly?: boolean,
    previewCarde?: boolean,
    inputCode?: string,

};

const CodeSandBox = ({
    height = "400px",
    inputCode,
    hasChangeButton = false,
    block = false,
    codeTitle = "编辑器",
    previewTitle = "预览",
    theme = "light",
    readOnly = false,
    previewCarde = true
}: CodeSandBoxProps) => {

    if (!inputCode) {
        inputCode = `function CodeSandBox() {
  const MyComponent = () => {
    return(
        <div style={{backgroundColor:"teal",width:"200px",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <p style={{color:"white"}}>这是我的自定义组件</p>
        </div>
    )
  }
  const App = () => {
    return (
      <div>
        <h1>Hello, React!</h1>
        <h2>React 实时预览</h2>
        <p>这是代码沙盒</p>
        <MyComponent />
      </div>
    );
  } 
  return (
    <div>
      <App />      
    </div>
  );
}`;
    }


    const [code, setCode] = React.useState(inputCode);
    const [changeDirection, setChangeDirection] = useState(false);
    const onChange = React.useCallback((val: string) => {
        setCode(val);
    }, []);

    return (
        <div className='w-full'>

            {hasChangeButton && <Button onClick={() => setChangeDirection(!changeDirection)}>{changeDirection ? "切换横向布局" : "切换竖向布局"}</Button>}
            <div className={`gap-0 w-[calc(100%-1.5rem)] m-3 ${previewCarde && 'grid'} ${changeDirection || block ? 'grid-rows-2' : 'grid-cols-2'} `} >

                <div className='w-full' style={{ flex: 1 }}>
                    <h5>{codeTitle}</h5>
                    <CodeMirror
                        value={code}
                        width='100%'
                        height={height} extensions={[javascript({ jsx: true })]}
                        onChange={onChange}
                        style={{ border: '1px solid #ccc' }}
                        theme={theme}
                        readOnly={readOnly}
                    />
                </div>
                {previewCarde && <div style={{ flex: 1 }}>
                    <h5>{previewTitle}</h5>
                    <div className='bg-white p-2.5 border-[#ccc] border-1 overflow-auto' style={{
                        height: height,
                    }}>
                        <LiveProvider code={code} scope={{ React, Button, FloatButton, ButtonGroup }}>
                            <LivePreview />
                            <LiveError style={{
                                color: 'red',
                                margin: '10px 0',
                                padding: '10px',
                                backgroundColor: '#fff3f3'
                            }} />
                        </LiveProvider>
                    </div>
                </div>}


            </div>
        </div>
    );
};

export default CodeSandBox;